<template>
    <div class="repairWorkOrderAdd">
      <el-dialog
      title="新增"
      :visible.sync="centerDialogVisible"
      width="75%"
      :close-on-click-modal="false"
      :modal-append-to-body="false"
      :before-close="close"
      class="dialog"
      
      >
      <div style="max-width:1000px;margin:auto;">
      <h4>填写报修信息
        <!-- <el-checkbox v-model="isChecked">未入账设备报修</el-checkbox> -->
      </h4>
      <table class="table" rules="all" border="1">
        <tr>
          <td>报修人</td>
          <td>
            <el-select size="small" v-model="addForm.repairsUserId" placeholder="请选择">
              <el-option
                v-for="item in userlist"
                :key="item.userId"
                :label="item.nickName"
                :value="item.userId"
              />
            </el-select>
          </td>
          <td>报障时间</td>
          <td>
            <el-date-picker
              v-model="addForm.theRepairTime"
              type="datetime"
              value-format="yyyy-MM-dd HH:mm:ss"
              placeholder="选择日期">
            </el-date-picker>
          </td>
        </tr>
        <template v-if="!isChecked">
        <tr>
          <td>设备名称</td>
          <td @click="selectDecive" class="con" colspan="3"><span v-if="deciveData.deviceName">{{deciveData.deviceName}}({{deciveData.deviceCode}})</span></td>
        </tr>
        <tr>
          <td>存放位置</td>
          <td colspan="3" class="con">{{deciveData.repositoryName}}</td>
        </tr>
        <tr>
          <td>规格型号</td>
          <td class="con">{{deciveData.deviceModel}}</td>
          <td>工程名称</td>
          <td>
            <el-input v-model="addForm.projectName" placeholder="请输入名称"></el-input>
          </td>
        </tr>
        </template>
        <!-- <template v-if="isChecked">
          <tr>
            <td>报障标题</td>
            <td>
              <el-input type="text" placeholder="请输入标题" v-model="deciveData.title"/>
            </td>
            <td>设备所属部门</td>
            <td>
              <treeselect v-model="addForm.deptId" :options="faultType"
                        placeholder="请选择所属部门"/>
            </td>
          </tr>
        </template> -->
        <tr>
          <td>故障类型</td>
          <td>
            <!-- <treeselect style="width: 199px;height: 36px;" v-model="addForm.faultType" :options="faultType"
                        placeholder="请选择故障类型"/> -->
            <el-select size="small" v-model="addForm.faultType" placeholder="请选择" clearable>
              <el-option
                v-for="item in faultTypeList"
                :key="item.faultTypeId"
                :label="item.faultTypeName"
                :value="item.faultTypeId"
              />
            </el-select>
          </td>
          <td>故障等级</td>
          <td>
            <el-select size="small" v-model="addForm.faultState" placeholder="请选择" clearable>
              <el-option
                v-for="item in failureLevel"
                :key="item.id"
                :label="item.name"
                :value="item.id"
              />
            </el-select>
          </td>
        </tr>
        <tr>
          <td>故障描述</td>
          <td colspan="3">
            <el-input type="textarea" :rows="2" v-model="addForm.repairsDescribe"></el-input>
          </td>
        </tr>
      </table>
      <h4>设备图片</h4>
      <div style="width:900px;">
        <el-upload
        :action="baseUrl()+'/common/upload'"
        :on-success="fileSuccess"
        :show-file-list="false"
        >
        <el-button size="mini" type="warning" icon="el-icon-folder-add">上传</el-button>
      </el-upload>
      <div class="unloadBox">
        <div class="img" v-for="(item,index) in addForm.deviceReportForRepairAccessoryDtoList">
          <el-image :src="baseUrl()+item.accessoryUrl" :preview-src-list="[baseUrl()+item.accessoryUrl]"></el-image>
          <i class="el-icon-close" @click="imgDel(index,item.accessoryUrl)"></i>
        </div>
      </div>
      <div class="btn">
        <el-button type="success"  icon="el-icon-plus" size="mini" @click="saveBtn">确定</el-button>
      </div>
      </div>
      </div>
      </el-dialog>
      
      <conservePlanAddDialog v-if="deciveDialog" @selectChange="currentChange" @chooseInfo="chooseInfo"></conservePlanAddDialog>
    </div>
</template>

<script>
  import {treeselect} from "@/api/system/dept";
  import Treeselect from "@riophae/vue-treeselect";
  import "@riophae/vue-treeselect/dist/vue-treeselect.css";
  import conservePlanAddDialog from "../../conserve/conservePlan/conservePlanAddDialog";
  import {reportRepairAdd,faultTypeList} from '@/api/repair/index'
  import {listUser} from '@/api/inventory/index'
  import {fileDelete,fileDownload,fileDeleteLibrary} from '@/api/basicInformation/index'
    export default {
      name: "repairWorkOrderAdd.vue",
      components:{
        Treeselect,
        conservePlanAddDialog,
      },
      watch:{
        isChecked(){
          this.addForm={
            deviceReportForRepairAccessoryDtoList:[]
          }
        }
      },
      data(){
        return{
          userlist:[],
          faultTypeList:[],
          isChecked:false,
          addForm:{
            deviceReportForRepairAccessoryDtoList:[]
          },
          deciveDialog:false,
          deciveData:'',
          faultType:'',
          failureLevel:[
            {
              id:'1',
              name:'一般',
            },{
              id:'2',
              name:'严重',
            },{
              id:'3',
              name:'紧急',
            },{
              id:'4',
              name:'技术改造',
            }],
          fileList:[],
          centerDialogVisible:true
        }
      },
      created() {
        this.getTree();
        this.getUserList()
        this.getfaultTypeList()
      },
      methods:{
        close(){
          this.$emit('subSetChane')
        },
        //所属部门下拉
        getTree() {
          treeselect().then(response => {
            this.faultType = response.data;
          });
        },
        getUserList(){
          //报修人
          listUser().then((res)=>{
            if(res.code==200){
              this.userlist=res.rows
            }
          })
        },
        getfaultTypeList(){
          faultTypeList().then((res)=>{
            if(res.code==200){
              this.faultTypeList=res.rows
            }
          })
        },
        chooseInfo(info){
          if(info){
            this.deciveData=info
            this.addForm.devicesId=info.id
          }
          this.deciveDialog=false
        },
        fileSuccess(res) {
          //文件上传成功
          this.addForm.deviceReportForRepairAccessoryDtoList.push({ accessoryName: res.fileName, accessoryUrl: res.filePath})
        },
        async imgDel(index,filePath){
          for(let i=0;i<this.addForm.deviceReportForRepairAccessoryDtoList.length;i++){
            if(index==i){
              if(this.addForm.deviceReportForRepairAccessoryDtoList[i].id){
                await fileDeleteLibrary(this.addForm.deviceReportForRepairAccessoryDtoList[i].id)
              }else{
                await fileDelete(this.addForm.deviceReportForRepairAccessoryDtoList.filePath);
              }
              this.addForm.deviceReportForRepairAccessoryDtoList.splice(i, 1);
            }
          }
        },
        //选择设备
        selectDecive(){
          this.deciveDialog=true;
        },
        //成功回调
        currentChange(data){
          if(data){
            this.deciveData=data
            
          }
          this.deciveDialog=false
        },
        saveBtn() {
          //新增-提交
          if(!this.addForm.theRepairTime){
            this.$message.warning('请填写报障时间!')
            return false
          }
          if(!this.addForm.devicesId){
            this.$message.warning('请选择设备!')
            return false
          }
          if(!this.addForm.faultState){
            this.$message.warning('请选择故障等级!')
            return false
          }
          if(!this.addForm.repairsDescribe){
            this.$message.warning('请填写故障描述!')
            return false
          }
          this.addForm.devicesState=1
          reportRepairAdd(this.addForm).then((res)=>{
            if(res.code==200){
              this.$message.success(res.msg)
              // this.$router.push('/maintain/repairWorkOrder')
              this.$emit('subSetChane',1)
            }
          })
          
        },
      }
    }
</script>

<style lang="scss">
.repairWorkOrderAdd{
  margin-left:20px;
  .dialog .el-dialog__body{
    height: 85vh;
    overflow: scroll;
  }
  .el-input__inner{
    border: none;
  }
  .el-select{
    width: 100%;
  }
  h4 {
    color: #05A380;
    .el-checkbox{
      padding-left:10px;
    }
  }

  .table {
    width:900px;
    border: 1px solid #cccccc;
    color: #606266;
    font-size: inherit;
    tr {
      td:nth-child(2n-1) {
        width: 20%;
        text-align: center;
      }
      td:nth-child(2n) {
        width: 30%;
        padding-left: 10px;
      }
      td {
        line-height: 35px;
        .el-input--medium .el-input__inner,.el-textarea .el-textarea__inner{
          border: none !important;
        }
        .con{
          margin-left:20px;
        }
      }
    }
  }
  .btn{
    text-align: center;
    margin-top:20px;
  }
  .unloadBox{
      border: 1px solid #cccccc;
      margin-top:20px;
      min-height: 50px;
      overflow: hidden;
      .file{
        width:100%;
        border-top:1px #cccccc dotted;
        line-height: 50px;
        .index{
          padding:0 10px;
          color:#666
        };
        i{
          float: right;
          line-height: 50px;
          padding-right: 10px;
          font-size: 20px;
          cursor: pointer;
        }
        .type{
          color: #666;
          float: right;
          padding-right: 30px;
        }

      }
      .img{
        margin:10px 0 10px 10px;
        text-align: center;
        float: left;
        position: relative;
        width:110px;
        height:100px;
        .el-image{
          width:100px;
          height:100px;
          border: 1px solid #cccccc;
          position: absolute;
          top:0;
          left:0;
        }
        i{
          position: absolute;
          right: 0px;
          font-size: 20px;
          top: -4px;
          z-index: 1;
        }
      }



    }
}
</style>
